<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">

    <title>Happy Lion</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Happy Lion Start -->
    <div class="happy-lion" id="lion">
        <div class="lion-face">
            <div class="hl-smile-l"></div>
            <div class="hl-smile-r"></div>
            <div class="lion-nose"></div>
        </div>
    </div>
    <!-- Happy Lion End -->

    <div class="btn-wrap" id="btn">
        <button>fly</button>
        <button>spin</button>
        <button>eye</button>
        <button>smile</button>
    </div>

    <script>
        window.addEventListener('load', function() {
            var lion = document.getElementById('lion'),
                btn = document.getElementById('btn'),
                url = location.hash.substring(1);
            btn.addEventListener('click', function(event) {
                var target = event.target;
                if (target.tagName === "BUTTON") {
                    var lionName = target.innerHTML;
                    lion.className = 'happy-lion hl-' + lionName;
                    location.hash = "#" + lionName;
                }
            })
            if (url !== '') {
                lion.className = 'happy-lion hl-' + url;
            }
        })
    </script>
</body>
</html>
